<template>
    <div class="race" >
        <div class="content">
            <div>
                <ItemSizer ref="itemsizer" :sizerdata="sizer" :itemname="'赛事'" @pushkeyword="getkeyword"
                    @pushuoid="getuoid">
                </ItemSizer>
                <div class="content__items" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(255,255,255,0.95)">
                    <UserRace class="content__items__UserRace" v-for="item in  contestsdata.value "
                        :imgUrl="item.contestProfileSmallPath" :key="item.contestId" :name="item.name"
                        :publisher="item.nickName" :start_time="item.regStart" :raceId="item.contestId">
                    </UserRace>
                    <div class="empty" v-show="isEmpty"><el-empty description="暂无数据" /></div>
                </div>
                <div class="content__switchpag">
                    <div class="pag">
                        <el-pagination :current-page="currentPage" :page-size="12" :total="total"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>
  
<script setup>
import UserRace from "../components/UserRace.vue";
import ItemSizer from "../components/ItemSizer.vue";
import { ref, reactive, onMounted } from "vue";
import { GetContest } from '@/api/front/contest';
// import { ElLoading } from "element-plus";

const loading = ref(true)
const isEmpty = ref(true)
let contestsdata = reactive([]);//赛事数据初始化
let sizer = [];//筛选框数据初始化
//赛事总和初始化
let total = ref(0)
const sizerData = [
    {
        // id: 0,
        name: "竞赛类别",
        options: ["全部", "工科类", "理科类", "文体", "商科", "综合"]
    },
    {
        // id: 1,
        name: "竞赛状态",
        // options: ["全部", "进行中", "已结束"]
        options: ["全部", "未开始", "进行中", "已结束"]
    },
]
if (sessionStorage.getItem('contestsData')) {
    contestsdata.value = JSON.parse(sessionStorage.getItem('contestsData')).pageList
    total.value = JSON.parse(sessionStorage.getItem('contestsData')).total
} 


let data = {
    //GetContest接口获取赛事数据的参数初始化
    status: "",
    contestType: "",
    name: "",
    page_num: 1,
    page_size: 12,
}
// 获取赛事数据
const getcontest = async () => {
    loading.value = true
    await GetContest(data).then(async res => {
        sessionStorage.setItem('contestsData', JSON.stringify(res.data));
        contestsdata.value = res.data.pageList//拿到赛事数据
        total.value = res.data.total
        loading.value = false
        if (res.data.total == 0) {
            isEmpty.value = true
        } else {
            isEmpty.value = false
        }
        console.log('res', data, contestsdata.value)
    }).catch((err) => {
        console.log('err', err);
    }) //请失败后的处理结果

}

// 筛选赛事
const getuoid = (n) => {
    if (n == undefined) { n = 0 }//避免报错
    if (n[0] == 0) {//点击“全部”按钮时
        data.contestType = ''
    } else {
        data.contestType = n[0] - 1//因为筛选有一个“全部”选项id为0，就是说筛选框是"0全部、1未开始",数据是"0未开始、1报名中"所以需要减1
    }
    if (n[1] == 0 || n[1] == undefined) {//点击“全部”按钮时
        data.status = ''
    } else {
        data.status = n[1] - 1//因为筛选有一个“全部”选项id为0，就是说筛选框是"0全部、1未开始",数据是"0未开始、1报名中"所以需要减1
    }
    data.name = ""//不受搜索影响
    data.page_num = 1
    getcontest()//重新获取赛事数据
    currentPage.value = 1//分页器组件的当前页为1
}

//搜索作品(对全部的赛事进行筛选)
const getkeyword = (keyword) => {
    data.status = ""//不受筛选影响
    data.contestType = ""//不受筛选影响
    data.name = keyword.value
    data.page_num = 1
    getcontest()//重新获取赛事数据
    currentPage.value = 1//分页器组件的当前页为1
}

const currentPage = ref(1);//分页器组件的当前页
// 当当前页改变时触发
const handleCurrentChange = (val) => {
    currentPage.value = val
    data.page_num = val
    getcontest()//重新获取赛事数据
};

const itemsizer = ref()//获得筛选器组件以便使用getsizeid方法
onMounted(async () => {
    window.scrollTo(0, 0)
    sizer = sizerData;//组件挂载时获取筛选框数据
    // 组件挂载时点击筛选框每一列的第一个，也就是说每一列的“全部”
    for (let i = 0; i < sizer.length; i++) {
        itemsizer.value.getsizeid(i, 0)
    }

});


</script>
  
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

// 主要内容
$width: 1060px;

.content {
    width: $width;
    margin: 0 auto;
    padding-top: 30px;

    // 筛选器
    .content__sizer {
        width: $width;
        border: 1px solid rgb(235, 234, 234);
        box-shadow: 3px 3px 8px rgb(170, 170, 170);
        border-radius: 10px;
        padding: 10px;

        .content__sizer__item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .content__sizer__item__options {

                a {
                    margin: 20px;
                    font-size: 14px;
                    text-decoration: none;
                    color: black;
                }

                .focus,
                span>&:active {
                    background-image: linear-gradient(to top, #fed6e3 0%, #b2dedc 100%, );
                    padding: 4px 10px;
                    border-radius: 13px;
                }
            }
        }

        .content__sizer__search {
            display: flex;
            align-items: center;

            .content__sizer__search__box {
                height: 30px;
                border: 1px solid #ccc;
                margin-left: 20px;
                display: flex;
                align-items: center;
                border-radius: 15px;
                padding: 0 10px;

                input {
                    height: 25px;
                    border: none;
                    outline: none;
                    background-color: transparent;
                }

                .el-icon {
                    margin-left: 5px;
                    cursor: pointer;

                    &:hover {
                        color: #42b983;
                    }
                }

            }

        }
    }

    // 竞赛
    .content__items {
        // height: 530px;
        width: $width;
        display: flex;
        // align-items: start;
        flex-flow: wrap;
        margin: 30px 0 30px 0;
        min-height: 420px;

        .content__items__UserRace {
            width: 250px;
            margin-right: 15px;
            margin-bottom: 15px;
        }
        .empty{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    // 数字计步器
    .content__switchpag {
        display: flex;
        align-items: center;
        justify-content: center;

        .pag {
            width: 1280px;
            display: flex;
            justify-content: center;
            margin-left: -1%;
        }
    }
}
</style>
  